/*
* @Date: 2021/1/29
* @Author: XueChengwu <xuechengwu@erayt.com>
* @Copyright: 2015-2019 Erayt, Inc.
* @Description: If you have some questions, please contact: xuechengwu@erayt.com.
*/
import React from 'react';
import './index.scss';
import { InputNumber } from 'antd';
import Icon from '@/components/Icon';

export default class extends React.Component {
  onTopLeftChange = (value) => {
    const { onChange } = this.props;
    onChange && onChange('borderTopLeftRadius', value);
  }

  onTopRightChange = (value) => {
    const { onChange } = this.props;
    onChange && onChange('borderTopRightRadius', value);
  }

  onBottomLeftChange = (value) => {
    const { onChange } = this.props;
    onChange && onChange('borderBottomLeftRadius', value);
  }

  onBottomRightChange = (value) => {
    const { onChange } = this.props;
    onChange && onChange('borderBottomRightRadius', value);
  }

  render() {
    const {
      borderTopLeftRadius, borderTopRightRadius,
      borderBottomLeftRadius, borderBottomRightRadius,
    } = this.props;
    return (
      <div className="border-position-box">
        <div>
          <InputNumber value={borderTopLeftRadius} onChange={this.onTopLeftChange}/>
          <Icon type="zuoshangjiao" />
          <Icon type="youshangjiao"/>
          <InputNumber value={borderTopRightRadius} onChange={this.onTopRightChange}/>
        </div>
        <div>
          <InputNumber value={borderBottomLeftRadius} onChange={this.onBottomLeftChange}/>
          <Icon type="zuoxiajiao" />
          <Icon type="youxiajiao" />
          <InputNumber value={borderBottomRightRadius} onChange={this.onBottomRightChange}/>
        </div>
      </div>
    );
  }
}
